<template>
  <div>
    <div class="head">
      <div class="input">
        <span>账户名称：</span>
        <el-input v-model="queryData.company_name" placeholder="请输入账户名称" />
      </div>
      
      <el-button type="primary" class="btn" @click="search">查询</el-button>
      <el-button type="primary" class="btn" @click="reset">重置</el-button>
      <el-button type="primary" class="btn" @click="add">新增</el-button>
    </div>
    <div class="box">
      <el-table
        :data="tableData"
        border
        row-key="id"
        ref="tableData"
        v-loading="isTableLoading"
        empty-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
        style="width: 100%"
        :max-height="tableHeight"
      >
        <el-table-column fixed type="index" align="center" label="序号" width="50" />
        <el-table-column
          prop="company_name"
          fixed
          show-overflow-tooltip
          align="center"
          label="账号"
          min-width="160"
        />
        <el-table-column
          prop="create_time"
          show-overflow-tooltip
          align="center"
          label="创建时间"
          min-width="140"
        />
       
        <el-table-column prop="project_progress_status" align="center" label="状态" width="100">
          <template #default="scope">
            <span>
              {{ scope.row.project_progress_status_name }}
            </span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" prop="action" label="操作" width="160">
          <template #default="scope">
            <div class="action">
              <!-- <span>授权</span> -->
              <span @click="details(scope.row)">详情</span>
              <span @click="edit(scope.row)">编辑</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
      background
        style="margin-top: 5px;text-align: right;"
        @size-change="search"
        @current-change="getList"
        :current-page.sync="queryData.page"
        :page-size.sync="queryData.size"
        layout="total, prev, pager, next,sizes,jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { dateFormat } from '../../libs/util';
import { UserPage } from '@/api/manage';
export default {
  name: 'user',
  data() {
    return {
      tableHeight:500,
      queryData: {
        company_name: '',
        xkz: '',
        page: 1,
        size: 10,
      },
      total: 0,
      isTableLoading: false,
      tableData: [],
      dialogVisible: false,
    };
  },
  computed: {},
  created() {
  },
  mounted() {
    this.$nextTick(() => {
        this.tableHeight = window.innerHeight - 260;
    });
    this.getList();
  },
  methods: {
    search() {
      this.queryData.page = 1;
      this.getList();
    },
    reset() {
      this.queryData.project_name = '';
      this.queryData.xkz = '';
      this.search();
    },
    add() {
      this.$router.push({
        path: '/company/addUser/index',
      });
    },
    edit(item) {
      this.$router.push({
        path: '/company/addUser/index',
        query: {
          id: item.id,
        },
      });
    },
    details(item) {
      this.$router.push({
        path: '/company/detailUser/index',
        query: {
          id: item.id,
          type: 1,
        },
      });
    },
    getList() {
      this.isTableLoading = true;
      UserPage(this.queryData).then((res) => {
        this.isTableLoading = false;
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    init() {
      if (this.phoneEditor) return;
      this.phoneEditor = new E('#editorContainer');
      // 上传图片到服务器，base64形式
      this.phoneEditor.config.excludeMenus = ['video', 'code'];
      this.phoneEditor.config.uploadImgShowBase64 = true;
      // // 隐藏网络图片
      this.phoneEditor.config.showLinkImg = false;

      this.phoneEditor.config.debug = true;
      //图片上传接口
      this.phoneEditor.config.uploadImgServer = ''; // 上传图片的接口地址
      this.phoneEditor.config.uploadFileName = 'image'; // formdata中的name属性，比如现在是将图片image加入到formdate，后台从image中接收到图片数据
      this.phoneEditor.config.uploadImgHeaders = {
        token: sessionStorage.getItem('token'), // 设置请求头
      };
      this.phoneEditor.config.uploadImgHooks = {
        customInsert: function (insertImg, result, editor) {
          console.log('成功', result);
        },
      };
      // 创建一个富文本编辑器
      this.phoneEditor.create();
      // 修改的时候，需要富文本内容回显，则需要加入以下代码
      // this.phoneEditor.txt.html(this.content);

      this.phoneEditor.config.onchange = (html) => {
        this.info_ = html; // 绑定当前逐渐地值
        // this.$emit('change', this.info_); // 将内容同步到父组件中
      };
    },
  },
};
</script>

<style scoped>
.head {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: #ffffff;
  border-radius: 5px;
  padding: 20px;
  padding-bottom: 0px;
}
.input {
  display: flex;
  align-items: center;
  margin-right: 15px;
  margin-bottom: 20px;
}
.input > span {
  font-size: 12px;
  flex-shrink: 0;
}
.btn {
  margin-bottom: 20px;
}
.box {
  width: 100%;
  background: #ffffff;
  border-radius: 5px;
  padding: 20px;
  margin-top: 20px;
}
.action {
  display: flex;
  align-items: center;
  justify-content: center;
}
.action span {
  color: #0256ff;
  font-size: 12px;
  cursor: pointer;
  margin: 0 8px;
}
.flex {
  width: 100%;
  display: flex;
  align-items: center;
}
.demo-ruleForm /deep/ .el-form-item__label {
  line-height: 14px;
}
#editorContainer /deep/ .w-e-text-container {
  height: 150px !important;
}
</style>
